<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<% String path = request.getContextPath(); %>
<html>
<head>
    <title>nucleic</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="icon" href="<%=path%>/images/favicon.ico" sizes="32x32"/>
    <link rel="stylesheet" href="<%=path%>/css/font.css">
    <link rel="stylesheet" href="<%=path%>/css/xadmin.css">
    <script type="text/javascript" src="<%=path%>/js/jquery-1.3.2.min.js"></script>
    <script src="<%=path%>/lib/layui/layui.js"></script>
    <script type="text/javascript" src="<%=path%>/js/xadmin.js"></script>
    <script src="<%=path%>/layui_exts/excel.js"></script>
    <style type="text/css">
        .layui-table {
            text-align: center;
        }

        .layui-table th {
            text-align: center;
        }
    </style>
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
       <a href="">首页</a>
        <a href="<%=path%>/rubbish/buyRubbish">购买废品</a>
      </span>
    <a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right"
       href="<%=path%>/rubbish/buyRubbish" title="刷新">
        <i class="layui-icon" style="line-height:30px">&#xe669;</i></a>
</div>
<div class="x-body">
    <%--添加模态框--%>
    <div class="layui-row" id="test">
        <div class="layui-col-md10">
            <form class="layui-form" id="addRubbishForm">
                <div style="margin-top: 20px;"></div>
                <div class="layui-form-item">
                    <label class="layui-form-label">废品名称：</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" class="layui-input" placeholder="请输入废品名称">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">废品分类：</label>
                    <div class="layui-input-block">
                        <select name="type" lay-filter="t">
                            <option value="废塑料">废塑料</option>
                            <option value="废纺织品/废皮革">废纺织品/废皮革</option>
                            <option value="废金属">废金属</option>
                            <option value="废纸">废纸</option>
                            <option value="废电子电器">废电子电器</option>
                            <option value="废玻璃">废玻璃</option>
                            <option value="其他废料">其他废料</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">废品规格：</label>
                    <div class="layui-input-block">
                        <input type="number" id="specification" step="0.00001" name="specification" class="layui-input"
                               placeholder="请输入垃圾数量">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">单价：</label>
                    <div class="layui-input-block">
                        <input type="text" name="unitprice" id="unitprice" class="layui-input" placeholder="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">总价：</label>
                    <div class="layui-input-block">
                        <input type="text" name="totalprice" id="totalprice" class="layui-input" placeholder=""
                               readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">提交
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script>
        layui.config({
            base: 'layui_exts/',
        });

        layui.use(['jquery', 'form', 'layer', 'laydate'], function () {
            var form = layui.form,
                $ = layui.jquery,
                laydate = layui.laydate;
            getUnitPriceByType("废塑料");
            form.on("select(t)", function (d) {
                // console.log(d);
                getUnitPriceByType(d.value)
            });

            //此处监听焦点状态，当失去焦点时，会执行此方法
            $("#specification").blur(function () {
                if ($("#specification").val() !== '') {
                    //此处为计算后赋值
                    var p = parseFloat($("#specification").val()) * parseFloat($("#unitprice").val());
                    $("#totalprice").val(p.toFixed(2));
                }
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
            });
            form.verify({});
            /*添加弹出框*/
            form.on('submit(formDemo)', function (data) {
                var param = data.field;
                $.ajax({
                    url: '<%=path%>/rubbish/orderRubbish',
                    type: "post",
                    data: JSON.stringify(param),
                    contentType: "application/json; charset=utf-8",
                    success: function (res) {
                        layer.msg('添加成功', {icon: 1, time: 3000});
                        return false;
                    },
                    error: function () {
                        layer.msg('添加失败', {icon: 0, time: 3000});
                        setTimeout(function () {
                            window.location.href = '<%=path%>/resident/findResident';
                        }, 2000);
                    }
                });
            });

        });

        function getUnitPriceByType(type) {
            $.getJSON('<%=path%>/rubbish/getUnitPriceByType?type=' + type, function (d) {
                    $("#unitprice").val(d.data);
                }
            )
        }

    </script>
</body>
</html>
